<template>
  <div style="width: 1180px; margin: 0 auto">
    <el-row class="tac">
      <el-col :span="12">
        <!-- 菜单组件 -->
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo custom-menu"
            :default-active="activeIndex"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            @select="handleSelect"
        >
          <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <span>我的订单</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><icon-menu /></el-icon>
            <span>我的发票</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><icon-menu /></el-icon>
            <span>我的浏览</span>
          </el-menu-item>
          <el-menu-item index="5">
            <el-icon><icon-menu /></el-icon>
            <span>我的收藏</span>
          </el-menu-item>
          <el-menu-item index="6">
            <el-icon><setting /></el-icon>
            <span>个人信息</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="12">
        <!-- 根据 activeIndex 显示不同内容 -->
        <div v-if="activeIndex === '2'">
          <div style="width: 960px; height: 500px; margin: 0 auto;background-color: #ffffff">
            <dingdan></dingdan>
          </div>
        </div>
        <div v-if="activeIndex === '3'">
          <div style="width: 960px; height: 500px; margin: 0 auto;background-color: #ffffff">
            <Invoice></Invoice>
          </div>
        </div>
        <div v-if="activeIndex === '4'">
          <div style="width: 960px; height: 500px; margin: 0 auto;background-color: #ffffff">
            <Browse></Browse>
          </div>
        </div>
        <div v-if="activeIndex === '5'">
          <div style="width: 960px; height: 500px; margin: 0 auto;background-color: #ffffff">
            <Collection></Collection>
          </div>
        </div>
        <div v-else-if="activeIndex === '6'">
          <div style="width: 960px; height: 500px; margin: 0 auto;">
            <geren></geren>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { watch } from 'vue'
import { useRoute } from 'vue-router'
import Invoice from '@/components/zgr/main/geren/Invoice.vue'
import Browse from "@/components/zgr/main/geren/Browse.vue";
import Collection from "@/components/zgr/main/geren/Collection.vue"

// 定义响应式数据，记录当前激活的菜单项索引
const activeIndex = ref('2');




const route = useRoute()

watch(
    () => route.path,
    () => {
      // 强制刷新组件
      activeIndex.value = '2'
    },
    { immediate: true }
)

// 处理菜单打开事件
const handleOpen = (key: string, keyPath: string[]) => {
  console.log('菜单打开', key, keyPath);
};

// 处理菜单关闭事件
const handleClose = (key: string, keyPath: string[]) => {
  console.log('菜单关闭', key, keyPath);
};

// 处理菜单项选择事件
const handleSelect = (key: string) => {
  // 更新当前激活的菜单项索引
  activeIndex.value = key;
};
</script>

<style scoped>
.custom-menu {
  width: 200px;
  height: 250px;
  background-color: #00BF68;
  border-radius: 5px;
}
.custom-menu>li {
width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
.custom-menu>li:hover {
  background-color: #ccc;
}
.custom-menu>li:last-child {
  border-bottom: none;
}
</style>